<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预约挂号</el-breadcrumb-item>
      <el-breadcrumb-item>预约</el-breadcrumb-item>
    </el-breadcrumb>

    <el-steps :active="active" class="section-title" finish-status="success">
      <el-step title="请选择医生"></el-step>
      <el-step title="选择预约时间"></el-step>
    </el-steps>

    <div class="container">

      <div v-if="active == 1">
        <div class="card">
          <el-row :gutter="50">
            <el-col :span="12" v-for="(item,index) in doctorList"  >
              <div class="card-body" @click="getDoctorDetail(item)">
                <ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
                  <li class="media">
                    <el-avatar :size="60" class="mr-3 rounded-circle" :class="avatarColor(index)">
                      {{ item.doctorName.charAt(0) }}
                    </el-avatar>
                    <div class="media-body">
                      <div class="media-title <!--node-status node-is-offline-->">医生名称：{{ item.doctorName }}</div>
                      <div class="media-title <!--node-status node-is-offline-->">所属部门：{{ item.departmentName }}</div>
                      <div class="media-title <!--node-status node-is-offline-->">已就诊人数：{{ item.peopleNum }}人</div>
                      <div class=" text-job text-muted">简介：{{ item.introduction }}</div>
                    </div>
                    <div class="media-items">
                      <div class="media-item" v-if="item.avgPoint != 0.0">
                        <el-rate
                          v-model="item.avgPoint"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}">
                        </el-rate>
                        <div class="media-label">总体评价</div>
                        <el-button round type="danger" style="margin-top: 10px;" @click.stop="showComment(item.id,index)">
                          查看评价信息
                        </el-button>
                      </div>

                      <div class="media-item" v-if="item.avgPoint == 0.0">
                        <div class="media-label">暂无评价</div>
                      </div>

                    </div>

                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div v-if="active == 2">
        <div v class="tcommonBox">
        <header>
          <h1>
            提交预约
          </h1>
        </header>

          <div class="contentAppointment">
            <div style="margin: 0 auto">
          <!--生成预约单-->
          <el-form  v-loading="loading" ref="form" :model="form" label-width="auto">
            <el-form-item label="医生名称：">
              <el-input style="width: 300px" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="预约日期：">
              <el-col :span="11">
                <el-date-picker type="date"  value-format="yyyy-MM-dd" @change="changeDate" :picker-options="pickerOptions" placeholder="选择日期" v-model="form.appointmentDate" style="width: 300px;"></el-date-picker>
              </el-col>

            </el-form-item>
            <el-form-item label="预约时间段：">
              <el-select  style="width: 300px"  clearable v-model="form.slot" placeholder="请选择时间段">
                <el-option v-if="morning" label="上午" value="0"></el-option>
                <el-option v-if="afternoon" label="下午" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="具体症状描述：">
              <el-input style="width: 300px"  type="textarea" v-model="form.desc"></el-input>
            </el-form-item>

            <el-button type="primary" style="margin: 0 auto;text-align: center;display: block;" @click="onSubmit">确定预约</el-button>
          </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-button style="margin-top: 12px;" v-if="active!=1" @click="prenext">上一步</el-button>

    <div v-if="showCommentMask" class="comment">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">详细评价信息</h5>
            <span style="width: 40px" class="close" @click="closeComment"> X
            </span>
          </div>

          <div class="card-body">
            <ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
              <li class="media">
                <el-avatar :size="60" class="mr-3 rounded-circle text-orange"> {{ doctorInfo.doctorName.charAt(0) }}
                </el-avatar>
                <div class="media-body">
                  <div class="media-title <!--node-status node-is-offline-->">医生名称：{{ doctorInfo.doctorName }}</div>
                  <div class="media-title <!--node-status node-is-offline-->">所属部门：{{ doctorInfo.departmentName }}</div>
                  <div class="media-title <!--node-status node-is-offline-->">已就诊人数：{{ doctorInfo.peopleNum }}人</div>
                  <div class=" text-job text-muted">简介：{{ doctorInfo.introduction }}</div>
                </div>
                <div class="media-items">
                  <div class="media-item" v-if="doctorInfo.avgPoint != 0.0">
                    <el-rate
                      v-model="doctorInfo.avgPoint"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                    <div class="media-label">总体评价</div>
                  </div>

                </div>

              </li>
            </ul>
            <a href="#" class="tmsg-comments-tip">同学评价</a>
            <div class="tmsg-commentshow">
              <ul class="tmsg-commentlist">
                <li class="tmsg-c-item" v-for="(item,index) in commentList">

                  <div class="media">
                    <el-avatar :size="60" class="mr-3 rounded-circle  " :class="avatarColorIteM(index,item)"> {{ item.commentName.charAt(0) }}
                    </el-avatar>
                    <div class="media-body">
                      <div class="media-title <!--node-status node-is-offline-->">评价人：{{ item.commentName }}</div>
                      <div class="media-title <!--node-status node-is-offline-->">评价时间：{{ item.createTime }}</div>
                      <div class=" text-job text-muted">评价内容：{{ item.content }}</div>
                    </div>
                    <div class="media-items">

                      <el-rate
                        v-model="item.servicePoint"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                      </el-rate>

                    </div>

                  </div>

                </li>
              </ul>

              <div style="float: right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5]"
                :page-size="queryCommentParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="commentTotal">
              </el-pagination>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dui-dialog-msk" v-if="showMask" style="height: 100%; "></div>
  </div>

</template>

<script>
import { getDoctorInfo, getCommentDetail, getDateAppointmentInfo, getDoctorLeaveInfo, onSubmit } from '@/api/appointment'

export default {
  name: 'Appointment',
  data () {
    const self = this
    return {
      queryCommentParams: {
        pageNum: 1,
        pageSize: 3
      },
      commentTotal: 0,
      showMask: false,
      showCommentMask: false,
      active: 1,
      doctorList: [],
      commentList: [],
      page: 1,
      hasMore: true,
      currentPage: 1,
      doctorInfo: {},
      leaveList: [],
      loading: true,
      form: {
        id: null,
        name: '',
        appointmentDate: null,
        slot: '',
        desc: ''
      },
      morning: true,
      afternoon: true,
      pickerOptions: {
        disabledDate (time) {
          const dayOfWeek = time.getDay()
          if (self.compare(time.getTime(), Date.now())) {
            return time.getTime() < Date.now()
          } else if (dayOfWeek === 0 || dayOfWeek === 6) {
            // 如果是周六或周日，禁用该日期
            return true
          } else if (self.compareLeave(time)) {
            return true
          }
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  methods: {
    compareLeave (time) {
      const dateStr = this.dateToString(time)
      for (let i = 0; i < this.leaveList.length; i++) {
        if (time.getTime() == this.leaveList[i]) {
          return true
        }
      }
    },
    next () {
      this.active++
      console.log(this.active)
    },
    compare (date, date1) {
      const dateStr = this.dateToString(date)
      const dateStr1 = this.dateToString(date1)
      if (dateStr === dateStr1) {
        if (new Date(date1).getHours() > 18) {
          return true
        }
      }
    },
    prenext () {
      this.active--
      console.log(this.active)
    },
    dateToString (dateTime) {
      dateTime = new Date(dateTime)
      // 获取年份
      const Y = dateTime.getFullYear() + '-'
      // 获取当前年的月份 月份要 + 1 （0代表1月）date.getMonth() + 1
      const M = dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) + '-' : (dateTime.getMonth() + 1) + '-'
      // 获取当前日（1 - 31）
      const D = dateTime.getDate() < 10 ? '0' + (dateTime.getDate()) : (dateTime.getDate())

      return Y + M + D
    },
    changeDate () {
      const date = this.dateToString(new Date())
      if (this.form.date === date) {
        if (date > 12) {
          this.morning = false
        }
      };
      this.form.slot = ''
      const that = this
      getDateAppointmentInfo(this.form.id, this.form.appointmentDate).then((response) => {
        if (response.morningNumber <= 0) {
          that.morning = false
        } if (response.afternoonNumber <= 0) {
          that.afternoon = false
        }
      }).catch(() => {

      })
    },
    showComment (id, index) {
      this.showMask = true
      this.showCommentMask = true
      this.doctorInfo = this.doctorList[index]
      const that = this
      getCommentDetail(id, that.queryCommentParams).then((response) => {
        console.log(response)
        that.commentList = that.commentList.concat(response.list)
        that.commentTotal = response.total
        if (!response.hasNextPage) {
          that.hasMore = false
        }
      }).catch(() => {
      })
    },
    closeComment () {
      this.showMask = false
      this.showCommentMask = false
      this.commentList = []
      this.page = 1
    },
    handleSizeChange (newSize) {
      const that = this
      console.log(newSize)
      that.queryCommentParams.pageSize = newSize
      getCommentDetail(that.doctorInfo.id, that.queryCommentParams).then((response) => {
        console.log(response)
        that.commentList = response.list
        that.commentTotal = response.total
      }).catch(() => {
      })
    },
    // 监听页码值变化
    handleCurrentChange (newPage) {
      const that = this
      console.log(newPage)
      that.queryCommentParams.pageNum = newPage
      getCommentDetail(that.doctorInfo.id, that.queryCommentParams).then((response) => {
        console.log(response)
        that.commentList = response.list
        that.commentTotal = response.total
      }).catch(() => {
      })
    },
    routeChange: function () { // 展示页面信息
      const that = this
      getDoctorInfo().then((response) => {
        that.doctorList = response
      }).catch(() => {
      })
    },
    onSubmit () {
      const that = this
      if (that.form.appointmentDate == null) {
        that.$message({
          type: 'error',
          message: '清选择预约日期!'
        })
        return
      }

      if (that.form.slot == '') {
        that.$message({
          type: 'error',
          message: '清选择预约时间段!'
        })
        return
      }
      console.log(this.form)
      onSubmit(this.form).then((response) => {
        const time = that.form.slot === '0' ? '上午' : '下午'
        this.$alert('你已成功预约' + that.form.appointmentDate + '的' + time + '时间段', '预约成功', {
          confirmButtonText: '确定',
          type: 'success'
        }).then(() => {
          window.location.reload()
        })
      }).catch(() => {

      })
    },

    getDoctorDetail (item) {
      this.$confirm('是否要选择' + '该医生进行预约', '确认提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.next()
        this.form.name = item.doctorName
        this.form.id = item.id
        getDoctorLeaveInfo(this.form.id).then((response) => {
          this.leaveList = response
          this.loading = false
        }).catch(() => {
        })
      }).catch(() => {
        //
      })
    },
    avatarColor (index) {
      console.log(index)
      if (index % 2 === 0) {
        return 'text-yellow'
      } else {
        return 'text-orange'
      }
    },
    avatarColorIteM (index, item) {
      console.log(item)
      if (index === 0) {
        return 'text-yellow'
      } else if (index === 1) {
        return 'text-purple'
      } else if (index === 2) {
        return 'text-orange'
      } else if (index === 3) {
        return 'text-blue'
      } else {
        return 'text-yellow'
      }
    }
  },
  created () {
    this.routeChange()
  }
}
</script>

<style scoped>
.section-title {
  font-size: 18px;
  color: #191d21;
  font-weight: 600;
  position: relative;
  margin: 30px 0 25px;
}
 .section-title2 {
   font-size: 18px;
   color: #191d21;
   font-weight: 600;
   position: relative;
   margin: 10px 0 25px;
 }

.container {
  padding-top: 10px;
}

.card-body .rounded-circle {
  box-shadow: 0 2px 6px #e6ecf1;
}

.pricing {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .03);
  background-color: #fff;
  border-radius: 3px;
  border: none;
  position: relative;
  text-align: center;
}

.comment {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
}

.pricing {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .03);
  background-color: #fff;
  border-radius: 3px;
  border: none;
  position: relative;
  margin-bottom: 30px;
  text-align: center
}

.pricing.pricing-highlight .pricing-title {
  background-color: #6777ef;
  color: #fff
}

.pricing.pricing-highlight .pricing-cta a {
  background-color: #6777ef;
  color: #fff
}

.exchangeBtn:hover {
  background-color: #394eea !important
}

.pricing .pricing-padding {
  padding: 40px
}

.text-yellow {
  font-family: "Helvetica Neue";
  background-color: #fbbd08;
  font-size: 35px;
}

.text-orange {
  font-family: "Helvetica Neue";
  background-color: #f37b1d;
  font-size: 35px;
}

.text-purple {
  font-family: "Helvetica Neue";
  background-color: #6739b6;
  font-size: 35px;
}

.text-blue  {
  font-family: "Helvetica Neue";
  background-color: #0081ff ;
  font-size: 35px;
}

/deep/ .el-rate__icon {
  font-size: 20px;
}

.pricing .pricing-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  background-color: #f3f6f8;
  color: #6777ef;
  border-radius: 0 0 3px 3px;
  display: inline-block;
  padding: 5px 15px
}

.pricing .pricing-price {
  margin-bottom: 45px
}

.pricing .pricing-details {
  text-align: left;
  display: inline-block
}

.pricing .pricing-details .pricing-item {
  display: flex;
  margin-bottom: 15px
}

.pricing .pricing-details .pricing-item .pricing-item-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  background-color: #63ed7a;
  color: #fff;
  margin-right: 10px
}

.media .media-title {
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 15px;
  color: #34395e;
}

.pricing .pricing-details .pricing-item .pricing-item-icon i {
  font-size: 11px
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.pricing .pricing-cta {
  margin-top: 20px
}

.pricing .pricing-cta a {
  display: block;
  padding: 20px 40px;
  background-color: #f3f6f8;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 3px 3px
}

.pricing .pricing-cta a .fas, .pricing .pricing-cta a .far, .pricing .pricing-cta a .fab, .pricing .pricing-cta a .fal, .pricing .pricing-cta a .ion {
  margin-left: 5px
}

.pricing .pricing-cta a:hover {
  background-color: #e3eaef
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  border: none;
  position: relative;
  margin-bottom: 30px;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;

  border-radius: 0.25rem;
}

.card-body {
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  padding: 20px 25px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
  margin-bottom: 30px;
}

.text-job {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: #34395e;
  font-weight: normal;
}

.text-muted {
  color: #98a6ad !important;
}

.list-unstyled-noborder li:last-child {
  border-bottom: none;
}

.list-unstyled-border li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.mr-3, .mx-3 {
  margin-right: 1rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.media-body {
  -ms-flex: 1;
  flex: 1;
}

.modal-dialog {
  position: relative;
  width: 1000px;
  margin: 1.75rem auto;
  pointer-events: none;
}

.media .media-items .media-item {
  flex: 1;
  text-align: center;
  padding: 0 15px;
}

.media .media-items .media-item .media-value {
  font-weight: 700;
  font-size: 18px;
}

.media .media-items .media-item .media-label {
  font-weight: 600;
  font-size: 12px;
  color: #34395e;
  letter-spacing: .5px;
}

.tmsg-comments-tip {
  display: block;
  border-left: 2px solid #363d4c;
  padding: 0 10px;
  margin: 40px 0;
  font-size: 20px;
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 0.3rem;
  outline: 0;
}

.dui-dialog-msk {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: #000;
  opacity: 0.5;
}

.tmsg-r-info .info-submit p, .tmsg-commentshow h1 {
  /*background: #97dffd;*/
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  /*transition: all .3s ease-in-out;*/
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.tmsg-comments .tmsg-comments-tip {
  display: block;
  border-left: 2px solid #363d4c;
  padding: 0 10px;
  margin: 40px 0;
  font-size: 20px;
}

.tmsg-commentlist {
  margin-bottom: 20px;

}

.tmsg-c-item {
  width: 800px;
  margin: 0 auto;
  margin-bottom: 25px;

}

.i-name {
  font-size: 14px;
  margin: 5px 8px 7px 0;
  color: #444;
  font-weight: bold;
  display: inline-block;
}

.i-time {
  color: #aaa;
  font-size: 12px;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.modal-header {
  border-bottom: none;
  padding-bottom: 5px;
}
.modal-header h5 {
  font-size: 18px;
  margin-bottom: 0;
  line-height: 1.5;
}
.modal-title {
  margin-bottom: 0;
  line-height: 1.5;

  padding: 0 10px;
  font-size: 20px;
}
.tcolors-bg {
  /* background: #97dffd; */
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  /* transition: all .3s ease-in-out; */
  height: 30px;
  line-height: 30px;
  text-align: center;
  transition: all 0.3s ease-in-out
}
.tcolors-bg:hover {
  background: #48456D;
}
.userInfoBox {
  margin: 0 auto;
  text-align: center;
}
.contentAppointment{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
